<template>
    <div class="sidebar">
        <div class="logo">
            <h1>久久</h1>
            <span>xxx用户</span>
        </div>
        <hr />
        <el-menu
      :default-active="active"
      router
      class="el-menu-vertical-demo">
      <el-menu-item :index="item.index" v-for="(item, i) in rights" :key="i">
        <i :class="item.class"></i>
        {{item.name}}
      </el-menu-item>
    </el-menu>
    </div>
</template>

<script>
export default {
    data () {
        return {
            active: '',
            rights: [
                {
                    name: '纪念馆管理',
                    id: 1,
                    index: '/memorialManage',
                    class: 'el-icon-tickets'
                },
                {
                    name: '祭祀财务统计',
                    id: 2,
                    index: '/sacrificeStatistics',
                    class: 'el-icon-view'
                },
                {
                    name: '推广财务统计',
                    id: 3,
                    index: '/promoteManage',
                    class: 'el-icon-rank'
                },
                {
                    name: '劳务提现管理',
                    id: 4,
                    index: '/laborManage',
                    class: 'el-icon-bell'
                },
                {
                    name: '礼金管理',
                    id: 5,
                    index: '/amountsManage',
                    class: 'el-icon-message'
                },
                {
                    name: '分网管理',
                    id: 6,
                    index: '/pageManage',
                    class: 'el-icon-menu'
                },
                {
                    name: '帮助中心',
                    id: 7,
                    index: '/helpCenter',
                    class: 'el-icon-phone-outline'
                }
            ]
        }
    },
    created () {
        this.active = this.rights[0].index
    }
}
</script>

<style lang="scss" scoped>
.sidebar{
    width: 210px;
    height: 100%;
    background: #025DA6;
    float: left;
    .el-menu{
        background: #025DA6;
        width: 100%;
    }
    .el-menu-item.is-active{
        color: #fff;
        background: #074473;
    }
    .el-menu-item{
        color: #fff;
    }
    .el-menu-item:hover{
        color: #000;
    }
     .el-menu-item i:hover{
         color: #000;
     }
    .el-menu-item i{
        color: #fff;
    }
    hr {
        width: 60%;
        border-color: #f1f1f1;
        margin-bottom: 20px;
    }
    .logo{
        text-align: center;
        // padding-bottom: 10px;
        // margin-bottom:20px;
        h1{
            font-size: 50px;
            color: #fff;
            margin: 20px;
        }
        span{
            color: #fff;
        }
    }
}
</style>
